<template>
  <div class="mnc-demo-dot" :style="{'-webkit-transform': `translateX(${translateX}px)`}">
    <span :style="{'-webkit-transform': `translateY(${translateY}px)`}"></span>
  </div>
</template>

<script type="text/babel">
  export default {
    props: {
      translateX: 0,
      translateY: 0
    }
  }
</script>

<style lang="less" scoped>
  .mnc-demo-dot {
    will-change: transform;
    position: absolute;
    right: 50px;
    transition: all .5s linear;
    z-index: 65;
  }

  .mnc-demo-dot span {
    display: block;
    will-change: transform;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: #95b04c;
    transition: all .5s cubic-bezier(.3, -.3, 1, 0);
  }
</style>
